<template>
	<view class="box">
		<view class="data">
			<text>待核销</text>
			<image
				src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://cdn7.axureshop.com/demo2024/2316761/images/%E9%A6%96%E9%A1%B5-%E8%AE%A2%E6%B0%91%E5%AE%BF/u583.svg"
				mode=""></image>
			<text>券码：{{data.ddbh}}</text>
		</view>
		<view class="box-data">
			<view class="datatop"><text>{{data.jname}}</text><text>{{data.status?'已入住':'待入住'}}</text></view>
			<view class="databottom">
				<view class="imgdata">
					<image :src="data.imgurl"></image>
				</view>
				<view class="textdata">
					<text>{{data.fx}}</text>
					<text>{{data.date}}</text>
					<view class="price">
						总价：<text>￥</text><text>{{data.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="data">
			{{data.date}}
		</view>
		<view class="data">
			<view>
				订房信息
			</view>
			<view>
				住房姓名 <input type="text" placeholder="请输入姓名" />
			</view>
			<view>
				手机号 <input type="text" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="data">
			<view>
				订房信息
			</view>
			<view>
				订单号 <text>{{data.ddbh}}</text>
			</view>
			<view>
				下单时间
				<text>{{new Date(data.datetime).toLocaleString().split('上')[0].replaceAll('/','-')}}
					{{new Date(data.datetime).toLocaleTimeString()}}</text>
			</view>
		</view>
		<view class="data">
			<button type="primary">申请退款</button>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	let data = ref([])
	onLoad((potion) => {
		data.value = JSON.parse(potion.data)
		console.log(potion.data);
	})
</script>

<style scoped lang="scss">
	.box {
		padding-top: 20rpx;
		width: 750rpx;
		background-color: #F2F2F2;
		height: calc(100vh - 90rpx);
		box-sizing: border-box;

		.box-data {
			width: 730rpx;
			height: 350rpx;
			margin: auto;
			margin-bottom: 20rpx;
			background-color: #FFF;
			border-radius: 10rpx;

			.datatop {
				width: 100%;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				align-items: center;

				text:nth-child(1) {
					font-weight: bolder;
					font-size: 35rpx;
				}

				text:nth-child(2) {
					font-size: 26rpx;
				}
			}

			.databottom {
				display: flex;

				.imgdata {
					width: 300rpx;
					height: 200rpx;
					background-color: red;
					border-radius: 10rpx;
					margin-right: 40rpx;

					image {
						width: 300rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}

				.textdata {
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					text:nth-child(1) {
						font-size: 20rpx;
					}

					text:nth-child(2) {
						font-size: 10rpx;
						color: #B0B0B0;
					}

					.price {
						font-size: 20rpx;

						text:nth-child(1) {
							font-size: 3rpx;
							color: #006FF6;
						}

						text:nth-child(2) {
							font-size: 30rpx;
							color: #006FF6;
						}
					}
				}
			}
		}

		.data:nth-child(1) {
			width: 730rpx;
			height: 350rpx;
			margin: auto;
			border-radius: 20rpx;
			justify-content: center;
			gap: 30rpx;
			align-items: center;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			text:nth-child(1) {
				font-size: 35rpx;
				font-weight: bolder;
			}

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.data:nth-child(3) {
			width: 730rpx;
			margin: auto;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 10rpx;
			background-color: #fff;
			font-weight: bolder;
			margin-bottom: 20rpx;
		}

		.data:nth-child(4) {
			width: 730rpx;
			box-sizing: border-box;
			height: 250rpx;
			background-color: #fff;
			margin: auto;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 40rpx;
			margin-bottom: 20rpx;

			view:nth-child(1) {
				font-size: 35rpx;
				font-weight: bolder;

			}

			view:nth-child(2) {
				font-size: 25rpx;
				color: #333333;
				display: flex;
				align-items: center;
				gap: 40rpx;

				input {
					font-size: 25rpx;
				}
			}

			view:nth-child(3) {
				font-size: 25rpx;
				color: #333333;
				display: flex;
				align-items: center;
				gap: 40rpx;

				input {
					font-size: 25rpx;
				}

			}
		}

		.data:nth-child(5) {
			width: 730rpx;
			box-sizing: border-box;
			height: 250rpx;
			background-color: #fff;
			margin: auto;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 40rpx;
			margin-bottom: 20rpx;

			view:nth-child(1) {
				font-size: 35rpx;
				font-weight: bolder;

			}

			view:nth-child(2) {
				font-size: 25rpx;
				color: #333333;
				display: flex;
				align-items: center;
				gap: 40rpx;

				text {
					color: #ADADAD;
					font-size: 25rpx;
				}
			}

			view:nth-child(3) {
				font-size: 25rpx;
				color: #333333;
				display: flex;
				align-items: center;
				gap: 40rpx;

				text {
					color: #ADADAD;
					font-size: 25rpx;
				}

			}
		}

		.data:nth-child(6) {
			width: 730rpx;
			height: 100rpx;
			background-color: #fff;
			margin: auto;

			button {
				width: 730rpx;

			}
		}

	}
</style>